<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="../lib/iconfont/iconfont.css">
    <!-- 引入头部和尾部样式 -->
    <link rel="stylesheet" href="../css/header.css">
    <!-- 引入goodsIntroduce.css -->
    <link rel="stylesheet" href="../css/goodsIntroduce.css">
    <!-- 引入alert.css -->
    <link rel="stylesheet" href="../css/alert.css">
    <!-- 引入header.js -->
    <script src="../js/header.js"></script>
</head>

<body>
    <!-- 头部导航 -->
    <header>
        <div class="w">
            <ul>
                <li><a href="javascript:;">请先登录</a></li>
                <li></li>
                <li><a href="javascript:;">免费注册</a></li>
                <li></li>
                <li><a href="../html/orders.html">我的订单</a></li>
                <li></li>
                <li><a href="../html/personal.html">会员中心</a></li>
                <li></li>
                <li><a href="javascript:;">帮助中心</a></li>
                <li></li>
                <li><a href="javascript:;">在线客服</a></li>
                <li></li>
                <li><a href="javascript:;"><i class="iconfont icon-shouji"></i> 手机版</a></li>
            </ul>
        </div>
    </header>
    <!-- 导航栏 -->
    <nav>
        <div class="w">
            <h1 class="logo">
                <a href="javascript:;">
                    小兔鲜儿
                </a>
            </h1>
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="../html/classify.html">居家</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">服饰</a></li>
                <li><a href="javascript:;">母婴</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">严选</a></li>
                <li><a href="javascript:;">数码</a></li>
                <li><a href="javascript:;">运动</a></li>
                <li><a href="javascript:;">杂项</a></li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" name="search" id="inp_search" placeholder="搜一搜">
            </div>
            <div class="shoppingCart">
                <div class="carTick">
                    <i class="iconfont icon-i-shoping-car"></i>
                    <span class="showNums"><i>0</i></span>
                </div>

                <div class="slideBar">
                    <div class="trangle"></div>
                    <div class="up">
                        <ul>
                            <!-- 使用js渲染里面的li -->
                        </ul>
                    </div>
                    <div class="down">
                        <div class="text">
                            <p>共 3 件商品</p>
                            <p>￥368.00</p>
                        </div>

                        <button>去购物车结算</button>

                    </div>
                </div>
            </div>
        </div>
    </nav>
    <!-- 滚动才显示的导航栏开始 -->
    <nav class="slide_nav">
        <div class="w">
            <h1 class="logo">
                <a href="javascript:;">
                    小兔鲜儿
                </a>
            </h1>
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="javascript:;">居家</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">服饰</a></li>
                <li><a href="javascript:;">母婴</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">严选</a></li>
                <li><a href="javascript:;">数码</a></li>
                <li><a href="javascript:;">运动</a></li>
                <li><a href="javascript:;">杂项</a></li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" name="search" id="inp_search" placeholder="搜一搜">
            </div>
            <div class="shoppingCart">
                <i class="iconfont icon-i-shoping-car"></i>
                <span class="showNums"><i>0</i></span>
            </div>
        </div>
    </nav>
    <!-- 滚动才显示的导航栏结束 -->


    <!-- 商品介绍页面开始 -->
    <div class="w">
        <div class="goodsIntroduce">
            <div class="goodsImgs_wrapper">
                <!-- 左边图片和图片列表 -->
                <div class="goodsImgs">
                    <div class="img_wrapper">
                        <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/7f483771-6831-4a7a-abdb-2625acb755f3.png"
                            alt="">
                        <!-- 放大镜 -->
                        <div class="layer" style="display: none;">

                        </div>
                    </div>
                    <!-- 放大镜盒子 -->
                    <div class="zoom_wrapper" style="display: none;">

                    </div>
                    <div class="imgs">
                        <ul>
                            <li class="selected"><img
                                    src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/7f483771-6831-4a7a-abdb-2625acb755f3.png"
                                    alt=""></li>
                            <li><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/a725cfaf-2d25-4155-9a2d-fa67f2daacde.png"
                                    alt=""></li>
                            <li><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/8f8d636f-87b8-4734-b579-c5abf1dd7084.png"
                                    alt=""></li>
                            <li><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/c5c155da-53f0-44b5-bb28-91019863f02d.png"
                                    alt=""></li>
                            <li><img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/06dd4404-6af6-437d-a417-b4b78baf21a2.png"
                                    alt=""></li>
                        </ul>
                    </div>

                </div>
                <!-- 左边下面商品销售情况收藏信息等 -->
                <div class="goodsSalles">
                    <div>
                        <div class="title">销量人气</div>
                        <div class="nums">100+</div>
                        <div class="functions"><i class="iconfont icon-flag"></i><span>销量人气</span></div>
                    </div>
                    <div>
                        <div class="title">商品评价</div>
                        <div class="nums">200+</div>
                        <div class="functions"><i class="iconfont icon-daipingjia"></i><span>查看评价</span></div>
                    </div>
                    <div>
                        <div class="title">收藏人气</div>
                        <div class="nums">80+</div>
                        <div class="functions"><i class="iconfont icon-shoucang"></i><span>收藏商品</span></div>
                    </div>
                    <div>
                        <div class="title">品牌信息</div>
                        <div class="nums">90+</div>
                        <div class="functions"><i class="iconfont icon-windmill1"></i><span>品牌主页</span></div>
                    </div>

                </div>
            </div>
            <!-- 右边商品信息选择规格等 -->
            <div class="goodsInfo">
                <div class="goodsText">
                    <div class="g_name">极光限定 珠光蓝珐琅锅</div>
                    <div class="g_price">
                        <span class="current_price"><i>￥</i><span>166.00</span></span>
                        <span class="original_price"><i>￥</i><span>200.00</span></span>
                    </div>
                </div>
                <div class="address">
                    <div><span>促销</span><span>12月好物放送，App领券购买直降120元</span></div>
                    <div><span>配送</span><span>
                            <div id="address-select" style="display: none;">
                                <select id="province-select" onchange="updateCitySelect()">
                                    <option value="">请选择省份</option>
                                </select>
                                <select id="city-select" onchange="updateDistrictSelect()" disabled>
                                    <option value="">请选择城市</option>
                                </select>
                                <select id="district-select" onchange="finishSelectAddress()" disabled>
                                    <option value="">请选择区/县</option>
                                </select>
                            </div>
                            <button onclick="showAddressSelect()">选择地址</button>
                            至
                            <span id="selected-address"></span>
                        </span></div>
                    <div><span>服务</span><span><i>无忧退货</i><i>快速退款</i><i>免费包邮</i><a href="javascript:;">了解详情</a> </span>
                    </div>
                </div>
                <div class="specification">
                    <div class="g_img">
                        <span>颜色</span>
                        <div>
                            <img data-name="黑色"
                                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png"
                                alt="">
                            <img data-name="蓝色"
                                src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png"
                                alt="">
                        </div>
                    </div>
                    <div class="g_size">
                        <span>尺寸</span>

                        <div>
                            <span class="size">30cm</span>
                            <span class="size">10cm</span>
                            <span class="size disabled">20cm</span>
                        </div>
                    </div>
                    <div class="g_producer">
                        <span>产地</span>
                        <div>
                            <span class="producer">日本</span>
                            <span class="producer">中国</span>
                        </div>
                    </div>
                    <div class="g_counts">
                        <span>数量</span>
                        <div class="operate">
                            <a href="javascript:;">-</a>
                            <span>1</span>
                            <a href="javascript:;">+</a>
                        </div>
                    </div>
                </div>
                <button id="openModal" class="addShopingCar">加入购物车</button>
            </div>
        </div>
        <!-- 盒子 -->
        <div class="box">

        </div>
    </div>
    <!-- 商品介绍页面结束 -->

    <!-- 尾部关于我们 -->
    <footer>
        <!-- 尾部上面 -->
        <div class="footer_top w">
            <!-- 客户服务 -->
            <div class="kehu">
                <div>客户服务</div>
                <div>
                    <span><i class="iconfont icon-a-4_huaban1"></i>在线客服</span>
                    <span><i class="iconfont icon-question"></i>问题反馈</span>
                </div>
            </div>
            <!-- 关注我们 -->
            <div class="aboutus">
                <div>关注我们</div>
                <div>
                    <span><i class="iconfont icon-weixin"></i>公众号</span>
                    <span><i class="iconfont icon-xinlangweibo"></i>微博</span>
                </div>
            </div>
            <!-- 下载app -->
            <div class="download_app">
                <div>下载APP</div>
                <div>
                    <span><img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt=""></span>
                    <div class="btn_download">
                        <i>扫描二维码立马下载app</i>
                        <button>下载页面</button>
                    </div>
                </div>
                <div>
                </div>
            </div>
            <!-- 服务热线 -->
            <div class="rexian">
                <div>服务热线</div>
                <div>
                    <div>400-0000-000</div>
                    <div>周一至周日 8:00-18:00</div>
                </div>
            </div>
        </div>

        <!-- 尾部下面 -->
        <div class="footer_bottom">
            <div class="w">
                <div class="footerUp">
                    <div><i class="iconfont icon-xiangzi"></i><span>价格亲民</span></div>
                    <div><i class="iconfont icon-dianzan"></i><span>物流快捷</span></div>
                    <div><i class="iconfont icon-huoche"></i><span>品质新鲜</span></div>
                </div>
                <div class="footerBottom">
                    <ul>
                        <li>关于我们</li>
                        <li></li>
                        <li>帮助中心</li>
                        <li></li>
                        <li>售后服务</li>
                        <li></li>
                        <li>配送与验收</li>
                        <li></li>
                        <li>商务合作</li>
                        <li></li>
                        <li>搜索推荐</li>
                        <li></li>
                        <li>友情链接</li>
                    </ul>
                    <div>CopyRight &copy; 小兔鲜儿</div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 引入iconfont -->
    <script src="../lib/iconfont/iconfont.js"></script>
    <!-- 引入godsIntroduce.js -->
    <script src="../js/goodsIntroduce.js"></script>

    <script>
        const provinceSelect = document.getElementById('province-select');
        const citySelect = document.getElementById('city-select');
        const districtSelect = document.getElementById('district-select');
        const selectedAddressSpan = document.getElementById('selected-address');

        // 省市区数据
        const areas = [

            {
                "name": "河北省",
                "children": [
                    {
                        "name": "石家庄市",
                        "children": [
                            {
                                "name": "长安区"
                            },
                            {
                                "name": "桥西区"
                            }
                            // 更多区/县...
                        ]
                    },
                    {
                        "name": "唐山市",
                        "children": [
                            {
                                "name": "路南区"
                            },
                            {
                                "name": "路北区"
                            }
                            // 更多区/县...
                        ]
                    }
                    // 更多城市...
                ]
            },
            {
                "name": "陕西省",
                "children": [
                    {
                        "name": "西安市",
                        "children": [
                            {
                                "name": "长安区"
                            },
                            {
                                "name": "雁塔区"
                            },
                            {
                                "name": "未央区"
                            }
                            // 更多区/县...
                        ]
                    },
                    {
                        "name": "咸阳市",
                        "children": [
                            {
                                "name": "渭城区"
                            },
                            {
                                "name": "秦都区"
                            }
                            // 更多区/县...
                        ]
                    }
                    // 更多城市...
                ]
            },
            {
                "name": "江苏省",
                "children": [
                    {
                        "name": "南京市",
                        "children": [
                            {
                                "name": "长安区"
                            },
                            {
                                "name": "雁塔区"
                            },
                            {
                                "name": "未央区"
                            }
                            // 更多区/县...
                        ]
                    },
                    {
                        "name": "苏州市",
                        "children": [
                            {
                                "name": "渭城区"
                            },
                            {
                                "name": "秦都区"
                            }
                            // 更多区/县...
                        ]
                    }
                    // 更多城市...
                ]
            }
            // 更多省份和城市...
        ];

        // 初始化省份 select 标签
        function initProvinceSelect() {
            areas.forEach(province => {
                const provinceOption = document.createElement('option');
                provinceOption.value = province.name;
                provinceOption.text = province.name;
                provinceSelect.appendChild(provinceOption);
            });
        }

        // 更新城市 select 标签
        function updateCitySelect() {
            clearOptions(citySelect);
            clearOptions(districtSelect);
            districtSelect.disabled = true;
            if (provinceSelect.value) {
                const selectedProvince = getSelectedAreaByName(provinceSelect.value);
                if (selectedProvince && selectedProvince.children && selectedProvince.children.length > 0) {
                    selectedProvince.children.forEach(city => {
                        const cityOption = document.createElement('option');
                        cityOption.value = city.name;
                        cityOption.text = city.name;
                        citySelect.appendChild(cityOption);
                    });
                    citySelect.disabled = false;
                }
            }
        }

        // 更新区/县 select 标签
        function updateDistrictSelect() {
            clearOptions(districtSelect);
            if (citySelect.value) {
                const selectedCity = getSelectedAreaByName(citySelect.value);
                if (selectedCity && selectedCity.children && selectedCity.children.length > 0) {
                    selectedCity.children.forEach(district => {
                        const districtOption = document.createElement('option');
                        districtOption.value = district.name;
                        districtOption.text = district.name;
                        districtSelect.appendChild(districtOption);
                    });
                    districtSelect.disabled = false;
                }
            }
        }

        // 选择地址完成，将选择的地址信息显示在 span 中
        function finishSelectAddress() {
            let address = '';
            if (provinceSelect.value) {
                address += provinceSelect.value;
            }
            if (citySelect.value) {
                address += ` ${citySelect.value}`;
            }
            if (districtSelect.value) {
                address += ` ${districtSelect.value}`;
            }
            selectedAddressSpan.innerText = address.trim();
            hideAddressSelect();
        }

        // 显示地址选择框
        function showAddressSelect() {
            document.getElementById('address-select').style.display = 'block';
        }

        // 隐藏地址选择框
        function hideAddressSelect() {
            document.getElementById('address-select').style.display = 'none';
        }

        // 清空 select 标签的 option
        function clearOptions(select) {
            for (let i = select.options.length - 1; i >= 0; i--) {
                select.remove(i);
            }
        }

        // 根据名称查询对应的区域对象
        function getSelectedAreaByName(name) {
            let selectedArea = null;
            areas.forEach(p => {
                if (p.name === name) {
                    selectedArea = p;
                } else if (p.children && p.children.length > 0) {
                    p.children.forEach(c => {
                        if (c.name === name) {
                            selectedArea = c;
                        } else if (c.children && c.children.length > 0) {
                            c.children.forEach(d => {
                                if (d.name === name) {
                                    selectedArea = d;
                                }
                            });
                        }
                    });
                }
            });
            return selectedArea;
        }

        // 页面加载时初始化省份 select 标签
        window.onload = function () {
            initProvinceSelect();
        };
    </script>
</body>

</html>